<template>
  <div class="pd_tb10">
    <div class="flex_sb mb10">
      <div class="title_1">商机跟进活动记录</div>
      <el-button plain icon="Plus" type="primary" @click="addFormVisible = true">新增</el-button>
    </div>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="活动类型" prop="followupTypeStr" min-width="120" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="参与人" prop="followupPerson" min-width="120" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="客户代表" prop="clientLeader" min-width="120" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="费用（元）" prop="payment" min-width="120" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="活动描述" prop="followupDesc" min-width="120" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="操作" align="center" fixed="right" min-width="120" class-name="small-padding fixed-width">
        <template #default="{ row }">
          <el-button link type="primary" @click="fileDataVisible = true">查看附件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 10"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog v-model="addFormVisible" @close="addDialogClose" title="新增跟进活动记录" width="60%" append-to-body>
      <el-form ref="addFormRef" class="custom-form" :model="addFormData" :rules="addFormRules" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="活动类型" prop="followupType">
              <el-select v-model="addFormData.followupType" placeholder="请选择" clearable >
                <el-option v-for="dict in followupTypeOptions" :key="dict.value+'followupType'" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动日期" prop="followupDate">
              <el-date-picker v-model="addFormData.followupDate" type="date" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参与机构" prop="followupOrg">
              <el-select v-model="addFormData.followupOrg" placeholder="请选择" clearable >
                <el-option v-for="dict in followupOrgOptions" :key="dict.value+'followupOrg'" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参与人员" prop="followupPerson">
              <el-input v-model="addFormData.followupPerson" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户代表" prop="clientLeader">
              <el-input v-model="addFormData.clientLeader" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费用（元）" prop="payment">
              <el-input v-model="addFormData.payment" maxlength="14" @input="(value)=>value.replace(/[^0-9.]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动描述" prop="followupDesc">
              <el-input type="textarea" v-model="addFormData.followupDesc" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="fileIds">
                <file-upload
                    v-model="addFormData.fileIds"
                    :fileType="['pdf','jpg','png','jepg','doc','docx', 'xls', 'xlsx','pptx','ppt']"
                ></file-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-button type="primary" @click="saveContacts">提交</el-button>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 查看附件 -->
    <el-dialog v-model="fileDataVisible" title="查看附件" width="50%" append-to-body>
      <el-form :model="fileData" label-width="auto">
        <el-form-item label="附件" prop="followupDesc">
          <el-button link type="primary">test.doc</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
      
<script setup>

const fileDataVisible = ref(false)

// 列表查询-start
const loading = ref(false);
const tableList = ref([]);
const total = ref(0);
const queryParams = reactive({
  certNo: "",
  pageNo: 1,
  pageSize: 10,
});
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableList.value = [
      {
        followupTypeStr: "车险",
        followupPerson: "张三",
        clientLeader: "李四",
        payment: "1000",
        followupDesc: "活动描述",
      },
      {
        followupTypeStr: "车险",
        followupPerson: "张三",
        clientLeader: "李四",
        payment: "1000",
        followupDesc: "活动描述",
      }
    ];
    total.value = Number(tableList.value.length);
    loading.value = false;
  }, 300);
};
getList();
// 列表查询-end

// 增加联系人-start
const followupTypeOptions = ref([
  { label: "保前查勘", value: 1 },
  { label: "其它", value: 2 },
]);
const followupOrgOptions = ref([
  { label: "武汉分公司", value: 1 },
]);
const addFormVisible = ref(false)
const addFormRef = ref(null)
const addFormRules = {
  followupType: [
    { required: true, message: "请输入", trigger: "blur" },
  ],
  followupDate: [
    { required: true, message: "请选择", trigger: "blur" },
  ],
  followupDesc: [
    { required: true, message: "请输入", trigger: "blur" },
  ]
}
const addFormData = reactive({
  followupType:'',
  followupDate:'',
  followupOrg:'',
  followupPerson:'',
  clientLeader:'',
  followupDesc:'',
  fileIds:[]
})
const addDialogClose = () => {
  addFormRef.value.resetFields()
  addFormVisible.value = false
}
const saveContacts = () => {
  console.log(addFormRef.value);
  addFormRef.value.validate(valid => {
    if(valid){
      addDialogClose()
    }
  })
}
// 增加联系人-end
</script>
    
<style lang="scss" scoped>
.pd_tb10{
  padding: 10px 0;
}
</style>